<template>
  <div>
    <!-- 添加模块 -->
    <div style="margin-bottom: 10px;">
      <el-button type="success" @click="handleAdd()">新增就业方向</el-button>
    </div>
    <!-- 新增就业方向弹窗 -->
    <el-dialog v-model="showAddForm" title="新增就业方向" width="40%">
      <el-form label-width="100px">
        <el-form-item label="就业方向名称">
          <el-input v-model="majorName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddMajor()">添加</el-button>
          <el-button @click="showAddForm = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改就业方向弹窗 -->
    <el-dialog v-model="showEditForm" title="修改就业方向" width="40%">
      <el-form label-width="100px">
        <el-form-item label="就业方向名称">
          <el-input v-model="majorName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEditMajor()">修改</el-button>
          <el-button @click="showEditForm = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 菜单数据详情表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="majorId" label="序号" width="150" />
      <el-table-column prop="majorName" label="就业方向名称" width="200" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row.majorId)" v-if="hasDeleteButton">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElButton, ElTable, ElTableColumn, ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { addMajorApi, updateMajorApi, deleteMajorApi, getMajorListApi } from '@/api/api';
import { computed } from 'vue';


// 格式化时间的方法  去掉T
const formatTime = (time: string) => {
  if (!time) return '';
  return time.replace('T', ' ');
}

// 表格数据
const tableData = ref([]);
const majorId = ref(0);
const majorName = ref('');

// 是否显示添加表单
const showAddForm = ref(false);
// 是否显示修改表单
const showEditForm = ref(false);

// 打开新增就业方向弹窗
const handleAdd = () => {
  showAddForm.value = true;
  majorName.value = '';
};

// 打开新增就业方向弹窗
const handleEdit = (row: any) => {
  showEditForm.value = true;
  majorId.value = row.majorId;
  majorName.value = row.majorName;
};

// 就业方向列表
const majorList = async () => {
  const response = await getMajorListApi();
  console.log('获取就业方向列表返回结果', response);
  if (response.code === 200) {
    tableData.value = response.data;
  } else {
    ElMessage.error('获取就业方向列表失败');
  }
}

// 提交新增就业方向
async function handleAddMajor() {
if (!majorName.value) {
  ElMessage.error('就业方向不能为空');
  return;
}


  const response = await addMajorApi({ majorName: majorName.value });
  if (response.code === 200) {
    ElMessage.success('新增成功');
    majorName.value = '';
    showAddForm.value = false;
    majorList();
  } else {
    ElMessage.error(response.msg);
  }
}

// 提交修改就业方向
async function handleEditMajor() {
  const response = await updateMajorApi({ majorId: majorId.value, majorName: majorName.value });
  if (response.code === 200) {
    ElMessage.success('修改成功');
    showEditForm.value = false;
    majorList();
  } else {
    ElMessage.error(response.msg);
  }
}

// 删除就业方向
const handleDelete = async (id: number) => {
  ElMessageBox.confirm(
    '确认删除该就业方向?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const response = await deleteMajorApi(id);
      if (response.code === 200) {
        ElMessage.success('删除成功');
        majorList();
      } else {
        ElMessage.error(response.msg);
      }
    } catch (error) {
      ElMessage.error('操作失败');
    }
  }).catch(() => {
    ElMessage.info('已取消');
  });
}

// 按钮权限列表
const buttonList=ref([]);
const hasDeleteButton = computed(() => {
  return buttonList.value.some(button => button === 'delete');
});

// 页面加载完后，加载默认数据
onMounted(() => {
  majorList();
  const storedButtons = localStorage.getItem('buttonList');
  if (storedButtons) {
    buttonList.value = JSON.parse(storedButtons);
  }
});
</script>
  
<style scoped></style>